<template>
  <div class="base-container">
    <div class="verify-menu">
      <el-menu
        :default-active="activeIndex"
        class="verify-menu-box"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item
          v-for="item in navItems"
          :key="item.title"
          :index="'/verify' + item.path"
        >
          {{ item.title }}
        </el-menu-item>
      </el-menu>
    </div>
    <div class="verify-container">
      <div class="title">
        <span class="sp1"></span>
        <span class="sp2">{{ titleList[activeId] }}</span>
      </div>

      <div class="conpane">
        <div v-if="formData.status==1" class="top-step">
          <!--<el-steps-->
            <!--:space="200"-->
            <!--:active="activeId"-->
            <!--align-center-->
            <!--finish-status="success"-->
            <!--style="justify-content: center;">-->

            <!--<el-step title="输入认证信息"></el-step>-->
            <!--<el-step title="申请认证"></el-step>-->
            <!--<el-step title="提交认证"></el-step>-->
          <!--</el-steps>-->

          <xStep :items="list" :active="activeId"></xStep>
        </div>

        <div v-show="activeId == 0" class="c-con">
          <div class="c-con-m">
            <div class="c-con-m-p">
              <div class="c-con-m-t">
                企业信息
              </div>
              <el-form
                label-position="right"
                label-width="220px"
                :model="formData"
                size="mini"
              >
                <el-form-item label="企业官网链接：">
                  <el-input
                    v-model="formData.link"
                    :disabled="formData.status==2"
                    placeholder="请输入官网链接"
                  ></el-input>
                </el-form-item>
                <el-form-item label="官网名称：">
                  <el-input
                    :disabled="formData.status==2"
                    v-model="formData.name"
                    placeholder="请输入官网名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="企业名称：" required>
                  <el-input :disabled="formData.status==2"
                    v-model="formData.companyName"
                            @blur="checkVerifyInfo"
                    placeholder="请输入企业名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="法定代表人：" >
                  <el-input :disabled="formData.status==2"
                    v-model="formData.owner"
                    placeholder="输入企业法人名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="注册资本：" >
                  <el-input :disabled="formData.status==2"
                    v-model="formData.value"
                    placeholder="输入企业注册资本"
                  ></el-input>
                  <span> 万元人民币</span>
                </el-form-item>
                <el-form-item label="成立日期：" >
                    <el-date-picker
                      :disabled="formData.status==2"
                      type="date"
                      placeholder="选择企业成立时间"
                      v-model="formData.establishedTime"
                      style="width: 640px;"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="注册地址：" >
                  <el-input :disabled="formData.status==2"
                    v-model="formData.rAddress"
                    placeholder="请输入公司注册地址"
                  ></el-input>
                </el-form-item>
                <el-form-item label="办公地址：" >
                  <el-input :disabled="formData.status==2"
                    v-model="formData.wAddress"
                    placeholder="请输入公司办公地址"
                    >

                  </el-input>
                </el-form-item>
                <el-form-item label="公司电话："v-on:a>
                  <el-input :disabled="formData.status==2"
                    v-model="formData.phone"
                    placeholder="请输入公司电话"
                  ></el-input>
                </el-form-item>
                <el-form-item label="公司邮箱：" required>
                  <el-input :disabled="formData.status==2"
                    v-model="formData.email"
                    placeholder="请输入公司邮箱"
                  ></el-input>
                </el-form-item>
                <el-form-item label="营业执照：" required>
                  <el-input :disabled="formData.status==2"
                    placeholder=""
                            v-model="formData.licence"
                    @change="(value) => {changeFile(1, value);}"
                    accept="image/jpeg,image/jpg,image/png"
                    type="file"
                    class="ip-file1"
                  ></el-input>
                  <div
                    style="cursor: pointer;z-index: 1; position: relative;"
                  >
                    <img
                      v-if="fileImg1.length < 5"
                      style="width: 140px; "
                      src="../../assets/verify/upimg1.png"
                      fit="fill"
                      @click="selectImg(1)"
                    />
                    <img
                      v-else
                      style="width: 260px; "
                      :src="fileImg1"
                      fit="fill"
                      @click="lookImg(fileImg1)"
                    />
                    <img
                      style="width: 260px; margin-left: 20px;"
                      src="../../assets/verify/yyzz.png"
                      fit="fill"
                      @click="lookImg('../../assets/verify/yyzz.png')"
                    />
                  </div>
                  <div>
                    <el-button @click="selectImg(1)"
                               :disabled="formData.status==2" type="primary" style="width: 140px;"
                    >{{fileImg1.length >5 ?"更换图片":"上传图片"}}
                    </el-button>
                  </div>
                  <el-dialog
                    title="图片预览"
                    :visible.sync="dialogTableVisible"
                  >
                    <div>
                      <img v-if="dialogImg.indexOf('yyzz')>=0"
                        :src="require('../../assets/verify/yyzz.png')"
                        style="width: 100%;"
                      />
                      <img v-else
                           :src="dialogImg"
                           style="width: 100%;"
                      />
                    </div>
                  </el-dialog>
                </el-form-item>

                <div class="c-con-m-t">联系人信息</div>
                <el-form-item label="联系人姓名："  required>
                  <el-input :disabled="formData.status==2"
                    v-model="formData.cName"
                    placeholder="请输入姓名"
                  ></el-input>
                </el-form-item>

                <el-form-item label="联系人手机号码：" required>
                  <el-input :disabled="formData.status==2"
                    v-model="formData.cPhone"
                    placeholder="请输入手机号码"
                  ></el-input>
                </el-form-item>
                <el-form-item label="联系人邮箱：" required>
                  <el-input :disabled="formData.status==2"
                    v-model="formData.cEmail"
                    placeholder="请输入邮箱地址"
                  ></el-input>
                </el-form-item>

                <el-form-item label="联系人身份证：" required>
                  <el-input :disabled="formData.status==2"
                            v-model="formData.cardFront"
                    placeholder="身份证正面"
                    type="file"
                    class="ip-file2"
                    @change="
                      value => {
                        changeFile(2, value);
                      }
                    "
                    accept="image/jpeg,image/jpg,image/png"
                  ></el-input>
                  <el-input :disabled="formData.status==2"
                    v-model="formData.cardBack"
                    placeholder="身份证反面"
                    type="file"
                    class="ip-file3"
                    @change="
                      value => {
                        changeFile(3, value);
                      }
                    "
                    accept="image/jpeg,image/jpg,image/png"
                  ></el-input>

                  <img
                    v-if="fileImg2.length < 5"
                    style="width: 140px; cursor: pointer;z-index: 1;position: relative;"
                    src="../../assets/verify/upimg2.png"
                    fit="fill"
                    @click="selectImg(2)"
                  />
                  <img
                    v-else
                    style="width: 260px; "
                    :src="fileImg2"
                    fit="fill"
                    @click="lookImg(fileImg2)"
                  />
                  <img
                    v-if="fileImg3.length < 5"
                    style="width: 140px; cursor: pointer;margin-left: 1rem;z-index: 1;position: relative;"
                    src="../../assets/verify/upimg2.png"
                    fit="fill"
                    @click="selectImg(3)"
                  />
                  <img
                    v-else
                    style="width: 260px; "
                    :src="fileImg3"
                    fit="fill"
                    @click="lookImg(fileImg3)"
                  />
                  <div>
                 <!--更换图片按钮fileimg2-->
                  <el-button @click="selectImg(2)"
                             :disabled="formData.status==2" type="primary" style="width: 140px;"
                  >{{fileImg2.length>5 ?"更换图片":"上传图片"}}
                  </el-button>
                  <el-dialog
                    title="图片预览"
                    :visible.sync="dialogTableVisible"
                  >
                    <div>
                      <img v-if="dialogImg.indexOf('yyzz')>=0"
                           :src="require('../../assets/verify/yyzz.png')"
                           style="width: 100%;"
                      />
                      <img v-else
                           :src="dialogImg"
                           style="width: 100%;"
                      />
                    </div>
                  </el-dialog>
                    <!--更换按钮fileImg3-->
                    <div style="float: right;padding-right: 350px">
                      <el-button @click="selectImg(3)"
                                 :disabled="formData.status==2" type="primary" style="width: 140px;"
                      >{{fileImg3.length>5 ?"更换图片":"上传图片"}}
                      </el-button>
                      <el-dialog
                        title="图片预览"
                        :visible.sync="dialogTableVisible"
                      >
                        <div>
                          <img v-if="dialogImg.indexOf('yyzz')>=0"
                               :src="require('../../assets/verify/yyzz.png')"
                               style="width: 100%;"
                          />
                          <img v-else
                               :src="dialogImg"
                               style="width: 100%;"
                          />
                        </div>
                      </el-dialog>
                           </div>

                  </div>
                </el-form-item>
                <el-form-item required label="审核描述"v-if="formData.status==3||formData.status==4">
                  <el-input
                    type="textarea"
                    v-model="formData.mark"
                    placeholder="请输入审核描述"
                    readonly
                  >
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <div class="c-con-m" style="text-align: center;margin: 2rem 0;">
            <div style="margin-bottom: 2rem;" v-if="formData.status==1">
              <span>
                <el-checkbox v-model="formData.agrement" shape="square"
                >我已阅读声明并接受</el-checkbox
                >
              </span>
              <span>
                <el-link class="minLH" type="warning" @click="lookAgreement(1)"
                >《信爪搜索推广认证协议》</el-link
                > </span
              >、
              <span>
                <el-link class="minLH" type="warning" @click="lookAgreement(2)"
                >《信爪搜索推广服务协议》</el-link
                > </span
              >与
              <span>
                <el-link class="minLH" type="warning" @click="lookAgreement(3)"
                >《信爪搜索隐私权保护声明》</el-link
                >
              </span>
            </div>
            <div style="text-align: center;">
              <el-button v-if="formData.status==1"
                type="primary"
                style="width:8rem;"
                size="small"
                @click="next"
              >下一步
              </el-button>

              <el-button v-if="formData.status==2"
                         type="warning"
                         style="width:8rem;"
                         size="small"
                        disabled
              >认证中
              </el-button>

              <el-button v-if="formData.status==3"
                         type="primary"
                         style="width:8rem;"
                         size="small"
                         disabled=""
              >已认证
              </el-button>
              <el-button v-if="formData.status==4"
                         type="primary"
                         style="width:8rem;"
                         size="small"
                         disabled=""
              >认证失败
              </el-button>

              <el-button v-if="formData.status==3||formData.status==4"
                         type="primary"
                         style="width:8rem;"
                         size="small"
                         @click="next"
              >申请修改
              </el-button>

              <el-button v-if="formData.status==5"
                         type="primary"
                         style="width:8rem;"
                         size="small"
                         @click="next"
              >已禁用
              </el-button>

              <el-button v-if="formData.status==5"
                         type="primary"
                         style="width:8rem;"
                         size="small"
                         @click="next"
              >人工申述
              </el-button>


            </div>
          </div>
        </div>

        <div v-if="activeId == 1" class="c-con">
          <el-form
            label-position="right"
            label-width="220px"
            :model="formData"
            size="mini"
          >
            <el-form-item label="认证费用：">
              <el-input
                :value="'￥' + formData.fee"
                class="decoration"
                disabled
              >{{ formData.fee }}
              </el-input
              >
              <div class="p2-text">
                目前处于服务推广期间，可享受认证费用全免
              </div>
            </el-form-item>
          </el-form>

          <div class="c-con-m" style="text-align: center;margin: 2rem 0;">
            <el-button
              type="primary"
              style="width:8rem;"
              size="small"
              @click="pre"
            >上一步
            </el-button
            >
            <el-button
              type="primary"
              style="width:8rem;"
              size="small"
              @click="next"
            >下一步
            </el-button
            >
          </div>
        </div>

        <div v-else-if="activeId == 2" class="c-con">
          <div class="c-con-m p3" style="text-align: center;margin: 2rem 0;">
            认证信息提交后，后台将在1天内完成审核，通过后可发布推广信息。
            <span style="color:#FF1F34;">1天</span>
            内完成审核，通过后可发布推广信息。
          </div>
          <div class="c-con-m" style="text-align: center;margin: 2rem 0;">
            <el-button
              type="primary"
              style="width:8rem;"
              size="small"
              @click="pre"
            >上一步
            </el-button
            >
            <el-button
              type="primary"
              style="width:8rem;"
              size="small"
              @click="verify"
              :disabled="loading"
            >确认提交
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {validUsername} from "@/utils/validate";
  import {trace} from "../../utils/trace";
  import {getFileUrl} from "../../utils"
  import {upFile} from "../../api/file"
  import {verify, verifyInfo} from "../../api/verify"
  import xStep from "../../components/xStep/xStep"
  import {hkShowErrorText, isNull} from "../../utils/tools"
  import { mapGetters } from 'vuex'
  export default {
    components: { xStep },
    name: "verify",
    data() {
      return {
        readonly:true,
        timeDefaultShow:"",
        navItems: [
          {title: "企业认证", path: "/index"},
          {title: "站点管理", path: "/site"},
        ],
        list: [
          "输入认证信息",
          "申请认证",
          "提交认证",
        ],
        loading: false,
        titleList: ["企业信息认证", "申请认证", "提交认证"],
        dialogTableVisible: false,
        dialogImg: "",
        activeId: 0,
        fileImg1: "",
        fileImg2: "",
        fileImg3: "",
        formData: {
          status:1,   //1 初始  2 进行中  3 通过  4 失败
          agreement: false,
          fee: 100,
          link: "",
          name: "",
          companyName: "",
          owner: "",
          value: "",
          rAddress: "",
          wAddress: "",
          phone: "",
          email: "",
          cName: "",
          cPhone: "",
          cEmail: "",
          establishedTime: "",
          licence: "",
          cardFront: "",
          cardBack: "",
          mark:"",
          officialNetName:"",
          officialNet:""
        },
      };
    },
    mounted: function () {
      this.initData();

    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    computed: {
      activeIndex() {
        let navItem = this.navItems.find(item => {
          return this.$route.path.indexOf(item.path) != -1;
        });
        return "/verify" + navItem.path;
      },
      ...mapGetters([
        'userInfo',
      ])
    },
    methods: {

      lookImg(value){
        this.dialogImg=value;
        this.dialogTableVisible = true
      },
      initData(){
        this.loading = true;
        this.$store.dispatch('verify/verifyDetailMe').then((data) => {
          trace("verifyDetailMe", data)
          this.setFormdata(data);
          this.loading = false;
          this.activeId = 0;
        }).catch(() => {
          this.loading = false;
          this.activeId = 0;
        })
      },
      setFormdata: function (data) {
        for (let key in data) {
          if (this.formData[key] != null) {
            if (key == "establishedTime") {
              if(data[key]==0){
                this.formData[key] = (new Date()).toString()
              }else{
                this.formData[key] = (new Date(data[key])).toString()
              }
            } else if(key == "licence"||key == "cardFront"||key == "cardBack") {

            }else{
              this.formData[key] = data[key];
            }
          }
        }
        this.fileImg1 = data.licence||"";
        this.fileImg2 = data.cardFront||"";
        this.fileImg3 = data.cardBack||"";

        if(this.formData.wAddress=="null"){
          this.formData.wAddress="--"
        }
        // if(this.formData.name=="null"||this.formData.link=="null"){
        //   this.formData.name="--"
        //   this.formData.link="--"
        // }

        this.formData.name=this.userInfo.officialNetName
        this.formData.link=this.userInfo.officialNet
      },
      changeFile: async function (id, value) {
        trace("changeFile", id,value,this["fileImg" + id]);
        if (!value) return;
        var file = document.getElementsByClassName("ip-file" + id)[0].children[0];

        this["fileImg" + id] = getFileUrl(file);
        trace("file1 =",file,this["fileImg" + id])
        var f2 = file.files[0];
        trace("file =",f2)

        let param = new FormData(); //创建form对象
        param.append("img", f2);
        var res = await upFile(param);

        trace("upfile", res)
        this["fileImg" + id] = res.data.url;

      },
      handleSelect(key, keyPath) {
        this.$router.push({path: key});
      },
      pre: function () {
        this.activeId -= 1;
        if (this.activeId < 0) {
          this.activeId = 0;
        }
      },
      next: function () {
        this.activeId += 1;
        if (this.activeId > 3) {
          this.activeId = 2;
        }
      },
      //提交数据
      verify: async function () {
        trace("提交数据", this.formData);
        let param = new FormData(); //创建form对象
        // param.append("file", file);
       //  if(this.formData.link.length>0){
       //    param.append("link", this.formData.link);
       //  }
       // if (this.formData.name.length>0){
       //   param.append("name", this.formData.name);
       //
       // // }
       //  param.append("link", this.formData.link||"--");
       //  param.append("name", this.formData.name||"--");
        param.append("owner", this.formData.owner);
        param.append("companyName", this.formData.companyName);
        param.append("value", this.formData.value);
        param.append("rAddress", this.formData.rAddress);
        param.append("wAddress", this.formData.wAddress);
        param.append("phone", this.formData.phone);
        param.append("email", this.formData.email);
        param.append("cName", this.formData.cName);
        param.append("cPhone", this.formData.cPhone);
        param.append("cEmail", this.formData.cEmail);
        param.append("cEmail", this.formData.mark);
        param.append("establishedTime",new Date(this.formData.establishedTime).getTime());
        param.append(
          "licence", this.fileImg1
        );
        param.append(
          "cardFront", this.fileImg2
        );
        param.append(
          "cardBack", this.fileImg3
        );

        var res = await verify(param);
        trace("企业认证-res", res);
        if(res.code==2000){
          this.initData();
        }
      },

      lookAgreement: function (value) {
        this.$router.push({path: "/verify/agreement"});
      },
      selectImg: function (value) {
        trace("sel", value);
        if(this.formData.status==2) return
        document.getElementsByClassName("ip-file" + value)[0].children[0].click();
      },
      async checkVerifyInfo() {
        if (this.formData.companyName.length >= 2) {
          let {companyName} = this.formData
          let res = await verifyInfo({companyName});
          if(res.data.toString().length>12){
            // 法人： faRen
            // 注册资本： regMoney
            // 成立时间：regData
            // 注册地址：address
            // 办公地址： 留空
            // 公司电话： phone
            let {faRen,regMoney,regDate,address,phone}=res.data;
            this.formData.phone = phone;
            this.formData.rAddress = address;
            this.formData.value =parseInt(regMoney.replace(/,/g,""));
            this.formData.establishedTime = new Date(regDate).toString();
            this.formData.owner = faRen;

          }else {
            res.data = {"companyCode":"71526726X","companyKey":"c26070aeb36f3eafb362414e67cbd77e","companyName":"腾讯科技(深圳)有限公司","companySize":"","regNumber":"440301503270924","provinceName":"广东","areaCode":"4403","areaName":"深圳市","regOrgName":"深圳市市场监督管理局","companyType":"企业法人","creditCode":"9144030071526726XG","issueTime":"2000-02-24","invalidTime":"","phoneArea":"0755","phone":"","email":"","webSite":"","tradedic":{"517":"机械设备、五金产品及电子产品批发","5211":"百货零售","6510":"软件开发","6520":"信息系统集成服务","6530":"信息技术咨询服务","7320":"工程和技术研究和试验发展"},"address":"深圳市南山区高新区科技中一路腾讯大厦35层","faRen":"马化腾","regMoney":"200（万元美元）","regType":"有限责任公司（台港澳法人独资）","regDate":"2000-02-24","bussiness":"2000-02-24 至 永续经营","chkDate":"2020-03-31","yearChk":"","cerValidityPeriod":"2000-02-24 至 永续经营","businessStatus":"存续","bussinessDes":"一般经营项目是：从事计算机软硬件的技术开发、销售自行开发的软件；计算机技术服务及信息服务；计算机硬件的研发、批发；玩具设计开发；玩具的批发与零售（许可审批类商品除外）；商品的批发与零售（许可审批类商品除外）；动漫及衍生产品设计服务；电子产品设计服务；游戏游艺设备销售；国内贸易；从事货物及技术进出口(不含分销及国家专营、专控、专卖商品) ；一类医疗器械销售；二类医疗器械销售。（特许经营除外；以上项目不涉及外商投资准入特别管理措施；不涉及国营贸易管理商品；涉及配额、许可证管理商品的，按国家有关规定办理申请）。许可经营项目是：三类医疗器械销售。","invalidTime2":"永续经营"}
            hkShowErrorText("请输入正确完整的企业名称。");
            let {faRen,regMoney,regDate,address,phone}=res.data;
            this.formData.phone = phone;
            this.formData.rAddress = address;
            this.formData.value = parseInt(regMoney);
            this.formData.establishedTime = new Date(regDate).toString();
            this.formData.owner = faRen;
          }
          trace("checkVerifyInfo= ",res);
        }
      },
    },
    created() {
      this.timeDefaultShow = new Date();
      this.timeDefaultShow.setMonth(new Date().getMonth() - 1);
      trace("time=",this.timeDefaultShow);
    },
    beforeDestroy() {

    }
  };
</script>

<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg: #283443;
  $light_gray: black;
  $cursor: black;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .register-container .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui css */
  .register-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: transparent;
        -webkit-appearance: none;
        border-radius: 5px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }

    .el-form-item {
      /*border: 1px solid rgba(0, 0, 0, 0.3);*/
      /*background: transparent;*/
      /*border-radius: 5px;*/
      color: black;
    }
  }
</style>

<style lang="scss" scoped>
  $bg: white;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $main_color: #134bde;

  .verify-container {
    min-height: 100%;
    // width: calc(100vw - 72px);
    background-color: $bg;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    border-radius: 10px;
    margin: 36px 36px 0 36px;

    .title {
      position: relative;
      width: 100%;
      background-color: white;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      line-height: 38px;
      display: flex;
      align-items: baseline;
      border-bottom: 1px solid #f0f0f0;
      padding: 5px 2rem;

      .sp1 {
        width: 4px;
        height: 19px;
        background: #134bdf;
        border-radius: 2px;
        margin-right: 10px;
      }

      .sp2 {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        line-height: 38px;
      }
    }

    .conpane {
      width: 100%;
      padding: 1rem 2rem;

      .top-step {
        background-color: rgba(237, 241, 244, 0.5);
        padding: 0.6rem;
      }

      .minLH {
        line-height: 1.5rem;
        color: #ff1f34;
      }

      .c-con {
        width: 990px;
        margin: 5px calc(50% - 495px);

        .c-con-m {
        }

        .p3 {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #333333;
          line-height: 38px;
        }

        .p2-text {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ff1f34;
          line-height: 38px;
        }

        .c-con-m-p {
          .ip-file1,
          .ip-file2,
          .ip-file3 {
            width: 140px;
            height: 140px;
            position: absolute;
            opacity: 0;
          }

          .c-con-m-t {
            border-bottom: 1px solid #f0f0f0;
            padding: 0 10px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #666666;
            line-height: 38px;
            margin: 20px 0;
          }
        }
      }
    }
  }

  .verify-menu {
    text-align: center;
    background-color: white;

    .verify-menu-box {
      margin-top: 4px;
      display: inline-block;
      overflow: auto;
      border-bottom-color: #ffffff !important;
    }
  }
</style>

<style scoped>
  ::v-deep .el-input {
    width: 640px;
  }

  .el-step.is-center .el-step__line {
    left: 0%;
    right: 0;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  ::v-deep .el-dialog {
    border-radius: 10px;
    width: 1150px;
    max-width: 80%;
  }

  .decoration input {
    text-decoration: line-through;
  }
</style>
